{{ template "layout/header" .}}
<main id="body">
    <div class="container">
        <div class="btn-group mb-3 d-lg-none" role="group" id="my_mobile_nav">
            <a role="button" class="btn btn-secondary active" data-active="menu-my" href="/my.html">个人资料</a>
            <a role="button" class="btn btn-secondary" data-active="menu-my-thread" href="/my_thread.html">论坛帖子</a>
            <a role="button" class="btn btn-secondary" data-active="menu-my-notice" href="?my-notice.htm">消息</a>
        </div>
        <div class="row">
            <!-- 左侧菜单 -->
            <div class="col-lg-2 hidden-md hidden-sm" id="my_aside">
                <div class="card">
                    <div class="card-body text-center">
                        <img class="avatar-4" src="{{.sessions.Useravatar}}">
                        <br>{{.sessions.Username}}
                    </div>
                    <div class="list-group list-group-flush text-center">
                        <a href="/my.html" class="list-group-item list-group-item-action active"
                            data-active="menu-my">个人资料</a>
                        <a href="/my_thread.html" class="list-group-item list-group-item-action"
                            data-active="menu-my-thread">论坛帖子</a>
                        <a href="?my-notice.htm" class="list-group-item list-group-item-action"
                            data-active="menu-my-notice">消息</a>
                    </div>
                </div>
            </div>
            <!-- 右侧内容 -->
            <div class="col-lg-10" id="my_main">
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs">
                            <li class="nav-item">
                                <a class="nav-link" href="/my.html" data-active="my_profile">基本资料</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/my_password.html" data-active="my_password">密码</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/my_avatar.html" data-active="my_avatar">头像</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="/my_rename.html" data-active="my_rename">更改用户名</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/my.html?action=4" data-active="my-email_notice">邮件通知</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="col-lg-6 mx-auto">
                            <form action="/api/v1/user/{{.sessions.Userid}}/name/reset" method="post" id="form">
                                <div class="form-group input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="icon icon-user icon-fw"></i></span>
                                    </div>
                                    <input type="text" class="form-control" placeholder="当前用户名→{{.sessions.Username}}"
                                        name="old_username" id="old_username" disabled="">
                                </div>
                                <div class="form-group input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="icon icon-user icon-fw"></i></span>
                                    </div>
                                    <input type="text" class="form-control" placeholder="请输入新用户名" name="user_name"
                                        id="new_username">
                                </div>
                                <div>
                                    <button type="button" class="btn btn-primary btn-block" id="submit"
                                        data-loading-text="正在提交...">重置用户名</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    var jform = $('#form');
    var jsubmit = $('#submit');
    var jnewname = $('#new_username');

    jnewname.on('blur', function () {
        $.ajax({
            url: "/api/v1/checkname",
            data: {
                "username": jnewname.val()
            },
            type: "GET",
            /*    contentType: false,
                processData:false,*/
            success: function (res) {
                //成功
                console.log(res.data.is_used)
                used = res.data.is_used
                if (used == 1) {
                    console.log("使用了")
                    // jform.find('[name="new_username"]').focus().alert("用户名已经使用了");
                    alert("用户名已经用了")
                    jsubmit.button('reset');
                    jsubmit.attr("disabled", true)
                } else {
                    jform.find('[name="new_username"]').focus().alert("可用");
                    jsubmit.attr("disabled", false)
                }
            }
        })
    })

    jsubmit.on('click', function () {
        jform.reset();
        jsubmit.button('loading');
        var postdata = jform.serializeObject();
        $.xpost(jform.attr('action'), postdata, function (code, message) {
            if (code == 200) {
                $.alert("修改成功")
                setTimeout(function () {
                    location.reload()
                }, 2000)
            }
        });
        return false;
    });
</script>
{{ template "layout/footer" .}}
